<template>
  <a-layout id="components-layout">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo" />
      <a-menu :default-selected-keys="['1']" theme="dark" mode="inline" class="menuBox">
        <a-menu-item key="1">
          <a-icon type="user" />
          <span>首页</span>
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon type="video-camera" />
          <span>地图</span>
        </a-menu-item>
        <a-menu-item key="3">
          <a-icon type="upload" />
          <span>nav 3</span>
        </a-menu-item>
        <a-menu-item key="4">
          <a-icon type="upload" />
          <span>nav 3</span>
        </a-menu-item>
        <a-menu-item key="5">
          <a-icon type="upload" />
          <span>nav 3</span>
        </a-menu-item>
        <a-menu-item key="6">
          <a-icon type="upload" />
          <span>nav 3</span>
        </a-menu-item>
        <a-menu-item key="7">
          <a-icon type="upload" />
          <span>nav 3</span>
        </a-menu-item>
        <a-menu-item key="8">
          <a-icon type="upload" />
          <span>nav 3</span>
        </a-menu-item>
        <a-menu-item key="9">
          <a-icon type="upload" />
          <span>nav 3</span>
        </a-menu-item>
        <a-menu-item key="10">
          <a-icon type="upload" />
          <span>nav 3</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" class="trigger" @click="()=> collapsed = !collapsed" />
      </a-layout-header>
      <a-layout-content class="layoutContent">
        <p>
          此框架使用antd框架，并且进行了ssr转为静态
          <a class="ant-btn ant-btn-primary" targer="_blank" href="https://ant-design-vue.gitee.io/components/button-cn/">antd</a>
          <a class="ant-btn ant-btn-primary" targer="_blank" href="https://zh.nuxtjs.org/guide">nuxt</a>
        </p>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  data() {
    return {
      collapsed: false
    }
  }
}
</script>
<style lang="scss">
#components-layout {
  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    text-align: right;
  }
  .trigger:hover {
    color: #1890ff;
  }
  .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
  }
  .menuBox {
    overflow: auto;
    height: calc(100% - 64px);
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 3px;
      box-shadow: inset 0 0 5px #1890ff;
      background: #1890ff;
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px #001529;
      border-radius: 10px;
      background: #001529;
    }
  }
  .layoutContent {
    margin: 24px 16px;
    padding: 24px;
    background: #fff;
    min-height: 280px;
    overflow: auto;
  }
  .layoutContent::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  .layoutContent::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 3px;
    box-shadow: inset 0 0 5px #1890ff;
    background: #1890ff;
  }

  .layoutContent::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px #fff;
    border-radius: 10px;
    background: #fff;
  }
}
</style>
